<template>
    <div class="info">
        <div class="title">
            <navTitle title="天士力资讯" :normal="false"></navTitle>
        </div>
        <van-pull-refresh v-model="isDownLoading" @refresh="onRefresh">
            <van-list v-model="isUpLoading" :finished="finished" :finished-text="finishedText" @load="onLoad"
                      class="list">
                <div class="item van-row--flex " v-for="item in list" @click="godetail(item.id,item.jump_url)">
                    <div class="titlebox">
                        <div class="name van-multi-ellipsis--l3">{{item.title}}</div>
                        <div class="date">{{item.created_at}}</div>
                    </div>
                    <van-image
                            width="122px"
                            height="96px"
                            fit="cover"
                            :src="item.img"
                    />
                </div>
            </van-list>
        </van-pull-refresh>
        <empty v-if="loading&&list.length==0"/>
    </div>
</template>

<script>
    import navTitle from '@/components/navTitle'
    import empty from '@/components/empty'
    import {NewList} from '@/http/common'

    export default {
        name: "infolist",
        components: {
            navTitle,
            empty
        },
        data() {
            return {
                isDownLoading: false,
                isUpLoading: false,
                finished: false,
                list: [],
                page: 0,
                take: 5,
                loading: false,
                finishedText: '已经到底啦~'
            }
        },
        created() {
        },
        methods: {
            onLoad() {
                this.page++;
                this.isUpLoading = true;
                this._NewList();
            },
            _NewList() {
                NewList(this.take, (this.page-1) * this.take).then(res => {
                    this.loading = true;
                    if (res.status == 1) {
                        if (this.list.length) {//当请求前有数据时 第n次请求
                            if (this.isUpLoading) {// 上拉加载
                                this.list = this.list.concat(res.data) //上拉加载新数据添加到数组中
                                this.$nextTick(() => { //在下次 DOM 更新循环结束之后执行延迟回调
                                    this.isUpLoading = false  //关闭上拉加载中
                                })
                                if (res.data.length < this.take) {//没有更多数据
                                    this.finished = true   //上拉加载完毕
                                }
                            } else {
                                this.finished = true   //上拉加载完毕
                            }
                            if (this.isDownLoading) {//关闭下拉刷新
                                this.isDownLoading = false; //关闭下拉刷新中
                                this.list = res.data; //重新给数据赋值
                                if (this.finished) { //如果上拉加载完毕为true则设为false。解决上拉加载完毕后再下拉刷新就不会执行上拉加载问题
                                    this.finished = false
                                }
                            }
                        } else {
                            this.isUpLoading = false; //关闭下拉刷新中
                            this.list = res.data;
                            if (this.list.length < this.take) {
                                this.finishedText = ''
                            }
                        }
                    }
                })
            },
            onRefresh() {
                this.isDownLoading = false;
                this.page = 0;
                this._NewList();
            },
            godetail(id, url) {
                if (url) {
                    window.location.href = url;
                } else {
                    this.$router.push({path: '/info/infodetail', query: {id: id}})
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .info {
        .title {
            padding: 32px 27px;
            border-bottom: 1px solid $bordercolor;

            /deep/ .navTitle {
                border-color: #CD2B32;
            }
        }

        .list {
            transition: ease-in-out .3s;
            position: relative;
            min-height: calc(100vh - 100px);
            padding-bottom: 70px;

            .item {
                justify-content: space-between;
                border-bottom: 1px solid #D8D7D5;
                align-items: center;
                padding: 10px 26px;

                .titlebox {
                    flex: 1;
                    margin-right: 40px;
                    /*height: 192px;*/
                    padding: 20px 0;
                    .name {
                        color: #121212;
                        font-size: 28px;
                        height: 87px;
                        font-weight: bold;
                        line-height: 40px;
                        margin-bottom: 25px;
                    }

                    .date {
                        color: #A1A0A0;
                        font-size: 24px;
                    }
                }

                /deep/ .van-image {
                    flex-shrink: 0;
                }

                &:last-child {
                    border: 0;
                }
            }
        }
    }


</style>